<template>
  <el-dialog
    width="1000"
    style="height: 500px"
    @open="openClick()"
    @close="openClose()"
    v-model="dialogVisible1"
  >
    <el-tabs
      @tab-click="(e) => tabTitleClick(e)"
      type="border-card"
      v-model="editableTabsValue"
    >
      <el-tab-pane name="1" style="height: 360px" label="工艺图">
        <iframe style="width: 100%; height: 360px" :src="httpUrl"></iframe>
      </el-tab-pane>
      <el-tab-pane name="2" label="视频监控">
        <el-tabs
          @tab-click="(e) => tabClick(e)"
          tab-position="left"
          style="height: 380px"
          class="demo-tabs"
          v-if="waterNameArr.length"
        >
          <el-tab-pane
            v-for="(item, index) in waterNameArr"
            :label="item.alias"
            :key="index"
            :name="item.id"
          >
            <iframe style="width: 100%; height: 380px" :src="videUrl"></iframe>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-else style="height: 380px" description="暂无设备接入" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  props: {
    httpUrl: String,
    tabsModelId: String,
    waterNameArr: Array,
    videUrl: String,
    dialogVisible: Boolean,
  },

  data() {
    return {
      editableTabsValue: '1',
      dialogVisible1: true,
    }
  },
  methods: {
    openClick() {
      this.editableTabsValue = '1'
      this.$emit('openClick')
    },
    openClose() {
      this.$emit('openClose')
    },
    tabClick(e) {
      this.$emit('tabClick', e)
    },
    tabTitleClick(e) {
      this.$emit('tabTitleClick', e)
    },
  },
}
</script>

<style></style>
